// components/jin-uni-weixin/uni-popup/uni-popup.js
Component({
  properties: {
    // 开启动画
    animation: {
      type: Boolean,
      default: true
    },
    // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
    // message: 消息提示 ; dialog : 对话框
    type: {
      type: String,
      default: 'center'
    },
    // maskClick
    maskClick: {
      type: Boolean,
      default: true
    }
  },
  data: {
    config: {
      top: 'top',
      bottom: 'bottom',
      center: 'center'
    },
    duration: 300,
    ani: [],
    showPopup: false,
    showTrans: false,
    maskClass: {
      'position': 'fixed',
      'bottom': 0,
      'top': 0,
      'left': 0,
      'right': 0,
      'backgroundColor': 'rgba(0, 0, 0, 0.4)'
    },
    transClass: {
      'position': 'fixed',
      'left': 0,
      'right': 0,
    },
    maskShow: true,
    mkclick: true,
    popupstyle: 'top'
  },
  timer: null,
  observers: {
    type(newVal) {
      // 根据类型执行对应的样式处理函数
      this[this.data.config[newVal]]()
    },
    maskClick(newVal) {
      this.setData({
        mkclick: newVal
      })
    },
    animation(newVal) {
      this.setData({
        duration: newVal ? 300 : 0
      })
    }
  },
  methods: {
    clear(e) {
      // TODO nvue 取消冒泡
      console.log(e)
      // e.stopPropagation()
    },
    open() {
      this.setData({
        showPopup: true
      })
      wx.nextTick(() => {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.setData({
            showTrans: true
          })
        }, 50);
      })
    },
    close() {
      this.setData({
        showTrans: false
      })
      wx.nextTick(() => {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.setData({
            showPopup: false
          })
        }, 300)
      })
    },
    onTap() {
      if (!this.data.mkclick) return
      this.close()
    },
    // 顶部弹出样式处理
    top() {
      this.setData({
        popupstyle: 'top',
        ani: ['slide-top'],
        transClass: {
          'position': 'fixed',
          'left': 0,
          'right': 0,
        }
      })
    },
    // 底部弹出样式处理
    bottom() {
      this.setData({
        popupstyle: 'bottom',
        ani: ['slide-bottom'],
        transClass: {
          'position': 'fixed',
          'left': 0,
          'right': 0,
          'bottom': 0
        }
      })
    },
    // 中间弹出样式处理
    center() {
      this.setData({
        popupstyle: 'center',
        ani: ['zoom-out', 'fade'],
        transClass: {
          'position': 'fixed',
          'display': 'flex',
          'flexDirection': 'column',
          'bottom': 0,
          'left': 0,
          'right': 0,
          'top': 0,
          'justifyContent': 'center',
          'alignItems': 'center'
        }
      })
    }
  }
})